<template>
  <article class="demo-wrapper">
    <section>当前数量：<span class="count">{{count}}</span></section>
    <section>
      <a-button @click="handleAdd">点击增加</a-button>
      <a-button @click="handleDecrease">点击减少</a-button>
      <a-button @click="handleReset">重置数量</a-button>
    </section>
    <section>处理后的数量：<span class="count">{{calcCount}}</span></section>
  </article>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
import {ADD_COUNT, DECREASE_COUNT, RESET_COUNT} from "@/store/constants";

export default {
  name: "demo",
  computed: {
    ...mapState({
      count: state => state.count
    }),
    ...mapGetters(['calcCount'])
  },
  methods: {
    ...mapMutations({
      handleAdd: ADD_COUNT,
      handleDecrease: DECREASE_COUNT,
      handleReset: RESET_COUNT
    })
  }
}
</script>

<style scoped lang="less">
.demo-wrapper {
  .count {
    color: red;
  }
}
</style>
